<template>
	<view class="content">
		<!--签约主体信息-->
		<view class="content_2">
			<view class="title_2">我的房源</view>
			<view class="sign_detail" style="margin-top: 20upx;">
				<view class="detail_title">姓名</view>
				<input class="detail_info" placeholder="请输入姓名" style="direction: rtl;" @input="getNameInput"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">身份证号码</view>
				<input class="detail_info" placeholder="请输入身份证" style="direction: rtl;" type="idcard" :value="Idnumber"
					maxlength="18" @input="getIdInput"></input>
			</view>
			<picker class="sign_detail" @change="pickerChange($event,'ownerrel')" :value="data.ownerrel"
				:range="ownerrelList" range-key="name">
				<view class="detail_title" style="width: 660upx;">{{ownerrelList[data.ownerrel].name}}</view>
				<image class="detail_icon" src="../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<view class="sign_detail">
				<view class="detail_title">手机号</view>
				<input class="detail_info" placeholder="请输入电话号码" style="direction: rtl;" type="number" maxlength="11"
					@input="getPhoneInput"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">出租屋证件（资质等）</view>
			</view>
			<!--证件图片上传-->
			<view class="upload_view" @click="uploadImg">
				<view class="uploadimg_view" v-if="uploadstate == '' || uploadstate == '-3' || uploadstate == '0'">
					<image class="uploadimg" src="../../../static/mine/owner/photo.svg"></image>
				</view>
				<image class="uploadimg_view" v-if="uploadstate == '1'" :src="uploadimg">
				</image>
			</view>
			<view class="sign_detail">
				<view class="detail_title">银行</view>
				<input class="detail_info" placeholder="请输入银行" style="direction: rtl;" type="text"
					@input="getBankInput"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">银行卡号</view>
				<input class="detail_info" placeholder="请输银行卡号" style="direction: rtl;" :value="Banknumber"
					type="number" @input="getBanknumInput"></input>
			</view>
			<!-- 填写验证码 -->
			<view class="sign_detail">
				<view class="detail_title_code" @click="xiaoyan" v-if="Takecode == '0'">获取验证码</view>
				<!--用户点击获取验证码后,等待60s-->
				<view class="detail_title_code" v-if="Takecode == '1'">{{Retaketime}}s</view>
				<input class="detail_info" placeholder="请输入验证码" style="direction: rtl;" type="number"
					@input="getCodeInput"></input>
			</view>
		</view>
		<!--底部提交-->
		<view class="content_3">
			<view class="contract_view">
				<view class="contract_icon_view" v-if="readstate == '0'" @click="readContract"></view>
				<view class="contract_icon_view" style="border: 5upx solid #5555FF;" v-if="readstate == '1'"
					@click="readContract">
					<view class="contract_icon"></view>
				</view>
				<view class="contract">勾选即代表已同意 <br>《用户使用协议》和《隐私声明》</view>
			</view>
			<view :class="[readstate == '0' ? 'submit' : 'submit_active']" @click="toPay">提交</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				uploadimg: '',
				uploadstate: '',
				data: {
					ownerrel: 0,
					bank: 0,
				},
				ownerrelList: [],
				readstate: '0',
				badroomList: [],
				housedetailList: [],
				//判断是否已核验用户信息
				autonym_status: false,
				//身份证号
				Idnumber: '',
				//银行卡号
				Banknumber: '',
				//是否获取了验证码
				Takecode: '0',
				//重新获取验证码等待时间
				Retaketime: '60'
			}
		},
		methods: {
			//上传图片
			uploadImg: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://api.yihua.pub/api/renthouse/landboos/Create_House/CreateCertPhoto',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								// console.log(JSON.parse(uploadFileRes.data));
								console.log(JSON.parse(res.data))
								this.uploadstate = JSON.parse(res.data).code
								this.uploadimg = JSON.parse(res.data).show_url
								if (JSON.parse(res.data).code == 1) {
									uni.showToast({
										title: '图片上传成功',
										position: 'center',
										icon: 'none'
									})
								} else if (JSON.parse(res.data).code == -3) {
									uni.showToast({
										title: '图片上传违规',
										position: 'center',
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '图片上传失败',
										position: 'center',
										icon: 'none'
									})
								}

							}
						});
					}
				})
			},
			//picker选择改变
			pickerChange: function(e, val) {
				this.data[val] = e.target.value
				this.role_id = this.ownerrelList[e.target.value].id
				// this.way_id = this.payforList[e.target.value].id
			},
			//阅读合同
			readContract: function() {
				if (this.readstate == '0') {
					this.readstate = '1'
				} else {
					this.readstate = '0'
				}
			},
			//核验用户信息接口
			xiaoyan: function() {
				this.Takecode = '1'
				let inputname = this.inputname;
				let inputid = this.inputid;
				let inputphone = this.inputphone;
				let inputbanknum = this.inputbanknum;
				let that = this;
				setTimeout(function() {
					that.Takecode = '0'
				}, 60000);
				//周期执行函数的定时器,赋值给timeid,以便clearInterval
				var timeid = setInterval(function() {
					that.Retaketime --
					if (that.Retaketime == '0') {
						clearInterval(timeid)
						that.Retaketime = '60'
					}
				}, 1000)
				
				//核验认证用户个人信息
				let userInfo = function(info) {
					new Request('autonym/Shi_Name/bankCardFourFactors').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								user_name: inputname,
								card_number: inputid,
								user_phone: inputphone,
								bank_number: inputbanknum,
								openid: app.globalData.openid,
								DevelopVersion: app.globalData.DevelopVersion,
								project: app.globalData.project,
							}
						},
						(res) => {
							if (res.data.code == 0) {
								new Request().showToast(res.data.msg);
								console.log('111')
								that.Idnumber = null
								that.inputid = null
								that.Banknumber = null
								that.inputbank = null
								return;
							}
							that.flowId = res.data.data.flowId;
							that.token = res.data.data.token;
							that.autonym_status = true;
							// that.toPay();
						}
					);
				}
				userInfo();
			},
			//跳转提交页面
			toPay: function() {
				//正则判断
				let sex = /^男$|^女$/
				let id =
					/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/
				let phone = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
				if (this.readstate == '0') {
					uni.showToast({
						position: 'center',
						title: '请勾选《用户使用协议》和《隐私声明》',
						icon: 'none',
					});
				} else if (this.inputname == '' || this.inputname == null) {
					uni.showToast({
						position: 'center',
						title: '请正确填写姓名',
						icon: 'none',
					});
				} else if (this.inputid == '' || this.inputid == null || !id.test(this.inputid)) {
					uni.showToast({
						position: 'center',
						title: '请正确填写身份证',
						icon: 'none',
					});
				}  else if (this.role_id == 0 || this.role_id == null) {
					uni.showToast({
						position: 'center',
						title: '请选择角色',
						icon: 'none',
					});
				} else if (this.inputphone == '' || this.inputphone == null || !phone.test(this.inputphone)) {
					uni.showToast({
						position: 'center',
						title: '请正确填手机号',
						icon: 'none',
					});
				} else if (this.inputbank == '' || this.inputbank == null) {
					uni.showToast({
						position: 'center',
						title: '请输入银行',
						icon: 'none',
					});
				} else if (this.inputbanknum == '' || this.inputbanknum == null) {
					uni.showToast({
						position: 'center',
						title: '请输入银行卡号',
						icon: 'none',
					});
				} else if (this.uploadstate == '' || this.uploadstate == '0' || this.uploadstate == '-3') {
					uni.showToast({
						position: 'center',
						title: '请上传图片',
						icon: 'none',
					});
				} else if (this.inputCode == '' || this.inputCode == null) {
					uni.showToast({
						position: 'center',
						title: '请输入验证码',
						icon: 'none',
					})
				} else {
					//认证用户真实信息
					if (typeof this.autonym_status == 'undefined' || this.autonym_status == false) {
						this.xiaoyan();
						return;
					}
					//判断用户是否输入了验证码
					if (this.inputCode == '' || this.inputCode == null || typeof this.inputCode == 'undefined') {
						new Request().showToast('请输入验证码');
						return;
					}
					if (this.flowId == '' || this.flowId == null || typeof this.flowId == 'undefined') {
						new Request().showToast('验证码有误');
						return;
					}
					//判断用户验证码是否正确
					let flowId = this.flowId;
					let token = this.token;
					let code = this.inputCode;
					let that = this;
					let userInfo = function(info) {
						new Request('autonym/Shi_Name/bankCardFourFactorsCode').request(
							() => {
								return 'POST'
							},
							() => {
								return {
									flowId: flowId,
									token: token,
									code: code,
									openid: app.globalData.openid,
									DevelopVersion: app.globalData.DevelopVersion,
									project: app.globalData.project,
								}
							},
							(res) => {
								if (res.data.code == 0) {
									new Request().showToast(res.data.msg);
									return;
								}
								new Request('landboos/Create_House/CreateBoos').request(
									() => {
										return 'POST'
									},
									() => {
										return {
											openid: app.globalData.openid,
											user_name: that.inputname,
											role_id: that.role_id,
											user_phone: that.inputphone,
											photo: that.uploadimg,
											bank: that.inputbank,
											bank_number: that.inputbanknum,
											card_number: that.inputid,
										}
									},
									(res) => {
										console.log(res.data.data)
										console.log(res)
										if (res.data.data == 'role_id') {
											uni.showToast({
												position: 'center',
												title: '请选择房源关系',
												icon: 'none',
												duration: '1500'
											});
										} else if (res.data.code == '1') {
											console.log('1')
											uni.showToast({
												position: 'center',
												title: '申请成功,审核中',
												icon: 'none',
												duration: '1500'
											})
											uni.navigateTo({
												url: '/pages/mine/owner/success'
											})
										} else if (res.data.code == '0') {
											console.log('0')
											uni.showToast({
												position: 'center',
												title: '您已经是房东身份了，不需要再注册',
												icon: 'none',
												duration: '1500'
											})
											uni.reLaunch({
												url: '/pages/mine/mine?code=' + res.data.code
											})
										}
									}
								)
							}
						);

					}
					userInfo();



				}
			},
			//获取用户输入信息
			getNameInput: function(e) {
				this.inputname = e.detail.value
			},
			getIdInput: function(e) {
				this.inputid = e.detail.value
				this.Idnumber = e.detail.value
			},
			getPhoneInput: function(e) {
				this.inputphone = e.detail.value
			},
			getBankInput: function(e) {
				this.inputbank = e.detail.value
			},
			getBanknumInput: function(e) {
				this.inputbanknum = e.detail.value
				this.Banknumber = e.detail.value
			},
			getCodeInput: function(e) {
				this.inputCode = e.detail.value
			}
		},
		onLoad() {
			//选择房源关系
			new Request('landboos/Create_House/GetHouseRelation').request(
				() => {
					return 'POST'
				},
				() => {
					return {

					}
				},
				(res) => {
					console.log(res.data.data)
					this.ownerrelList = res.data.data
					this.ownerrelList.unshift({
						id: '0',
						name: '请选择角色'
					})
					console.log(this.ownerrelList)
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		房源详细样式
	*/
	.content_1 {}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	/*
		签约主体信息样式
	*/
	.title_2 {
		height: 88upx;
		background-color: #B3E9DC;
		line-height: 88upx;
		padding-left: 28upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.sign_detail {
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx 28upx;
		background-color: #FFFFFF;
		position: relative;
	}

	.detail_info {
		height: 37upx;
		line-height: 37upx;
		font-size: 28upx;
		color: #999999;
	}

	.detail_icon {
		width: 40upx;
		height: 40upx;
		transform: rotate(180deg);
		position: absolute;
		top: 20upx;
		right: 20upx;
	}

	.detail_son {
		margin: 0upx 30upx;
		padding: 0upx 30upx;
		display: flex;
		flex-direction: column;
	}

	.son_view {
		height: 80upx;
		background-color: #FFFFfF;
		display: flex;
		align-items: center;
	}

	.chooseicon_view {
		height: 30upx;
		width: 30upx;
		margin-right: 30upx;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		border: 5upx solid #5555ff;
	}

	.chooseicon_son {
		height: 20upx;
		width: 20upx;
		border-radius: 20upx;
		margin: 0 auto;
		background-color: #5555ff;
	}

	.son_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 26upx;
		color: #929292;
	}

	/*
		底部提交样式
	*/
	.content_3 {
		position: fixed;
		z-index: 999;
		height: 100upx;
		width: 714upx;
		background-color: #49453A;
		bottom: 0upx;
		left: 0upx;
		padding-left: 40upx;
	}

	.contract_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.contract_icon_view {
		height: 40upx;
		width: 40upx;
		border-radius: 40upx;
		border: 5upx solid #cccccc;
		box-sizing: border-box;
		margin-right: 30upx;
		display: flex;
		align-items: center;
	}

	.contract_icon {
		height: 22upx;
		width: 22upx;
		border-radius: 25upx;
		background-color: #5555ff;
		margin: 0 auto;
	}

	.contract {
		width: 410upx;
		font-size: 26upx;
		color: #FFFFFF;
	}

	.submit_active {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}

	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #B6B6B6;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}

	/*
		证件图片上传
	*/
	.upload_view {
		height: 120upx;
		padding-bottom: 28upx;
		background-color: #FFFFFF;
		padding-left: 28upx;
	}

	.uploadimg_view {
		height: 120upx;
		width: 120upx;
		border-radius: 10upx;
		border: 2upx solid #BBBBBB;
		background-color: #e5e5e5;
		display: flex;
		align-items: center;
	}

	.uploadimg {
		width: 48upx;
		height: 48upx;
		margin: 0 auto;
	}

	/* 验证码css */
	.detail_title_code {
		width: 150upx;
		text-align: center;
		border: 1upx #8AE3D7 solid;
		border-radius: 10upx;
		color: #999999;
		padding: 10upx;
		font-size: 28upx;
	}
</style>
